{% extends "base.html" %}
{% block title %}LISN Data:::::{% endblock %}
{% block extra_head %}
<style type="text/css">
 .carousel-fade {
  .carousel-inner {
    .item {opacity: 0; transition-property: opacity;}
    .active {opacity: 1;}
    .active.left,
    .active.right {left: 0; opacity: 0; z-index: 1;}
    .next.left,
    .prev.right {opacity: 1;}
  }
  .carousel-control {z-index: 2;}
}
</style>
{% endblock %}
{% block dataactive %}active{% endblock %}
{% block content-title %}DATA{% endblock %}
{% block content-suptitle %}<a href="/data/realtime">Near-Realtime Plots</a>{% endblock %}
{% block content %}

{% if dtype %}
  <div class="text-center"><strong>{{dtype.name}}</strong></div>
  <div class="text-center">Updated: {% now "Y/m/d H:i" %} (UT)</div>
  <br>
  <div class="text-center">
  {% if dtype.alias == "s4map" %}
    <div id="carousel" class="carousel carousel-fade" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
    {% for item in images %}
      <div class="item {{item.active}}">
      <img class="img-responsive center-block" style="width:600px" src="{{item.img}}">
      </div>
    {% endfor %}
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  {% else %}
    {% for item in images %}
      <img class="img-thumbnail" style="width:400px" src="{{item}}">
    {% endfor %}
  {% endif %}
  </div>
{% else %}
<div class="media">
  <div class="media-left media-middle">
    <a href="{{ ROOT_URL }}/data/realtime/tec"><img class="media-object" src="{{STATIC_URL}}images/tec_small.png" alt="TEC"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">TEC</h4>
    Total Electron Content of LISN stations (latest 24 hours). 
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
    <a href="{{ ROOT_URL }}/data/realtime/scint"><img class="media-object" src="{{STATIC_URL}}images/s4_small.png" alt="TEC"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">GPS S4 index</h4>
    GPS Scintillation index S4 of LISN stations (latest 24 hours). 
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
    <a href="{{ ROOT_URL }}/data/realtime/minute"><img class="media-object" src="{{STATIC_URL}}images/mag_small.png" alt="TEC"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Magnetograms</h4>
    Magnetic fields components H, Z & D (latest 24 hours). 
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
    <a href="{{ ROOT_URL }}/data/realtime/PWR"><img class="media-object" src="{{STATIC_URL}}images/ion_small.png" alt="TEC"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Ionograms</h4>
     Latest Power image from VIPIR's Ionosondes. 
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
    <a href="{{ ROOT_URL }}/data/realtime/s4map"><img class="media-object" src="{{STATIC_URL}}images/s4map_small.png" alt="TEC"></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">GPS S4 index Map</h4>
     GPS S4 Scintillation index Map (latest 24 hours). 
  </div>
</div>
{% endif %}
<!--modal -->
<div class="modal fade" id="realtime_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <h4 class="modal-title">Near-Realtime Plots</h4>
      </div>
      <div class="modal-body" style="text-align: center">
      <img width="600px" src="{{ url_plot }}">
      </div>
    </div>
  </div>          
</div>
<!--endmodal -->

{% endblock %}
{% block sidebar%}
{% include "sidebar_news.html"%}
{% endblock %}

{% block extra_js%}
<script type="text/javascript">

$(document).ready(function() {
  $('.show_modal').click(function(){
    $('#realtime_modal').modal({show:true});
    return false;   
  });
});

setTimeout(function(){
	   window.location.reload(1);
}, 300000);
</script>
{% endblock %}